<template>
	<div>
		<div class="disFlex m-b-12" style="margin-bottom: 40px">
			<div class="m-r-20">
				<img src="../assets/img/right.png" alt="" srcset="" />
			</div>
			<div class="tit">今日群数据</div>
		</div>
		<div class="disFlexItem m-b-12">
			<div class="content-c-c m-r-20">
				<div class="m-r-30 p-relative">
					<img src="../assets/img/img2.png" alt="" />
				</div>
				<div>
					<div class="center font-c t-c">总群数</div>
					<div class="center num-c">{{ isZongQunInRange }}</div>
				</div>
			</div>
			<div class="content-c-c m-r-20">
				<div class="m-r-30 p-relative">
					<img src="../assets/img/img1.png" alt="" />
				</div>
				<div>
					<div class="center font-c t-c">互动数</div>
					<div class="center num-c">{{ interactionlist }}</div>
				</div>
			</div>
		</div>
		<div class="disFlexItem m-b-16">
			<div class="content-c-c m-r-20">
				<div class="m-r-30 p-relative">
					<img src="../assets/img/img1.png" alt="" />
				</div>
				<div>
					<div class="center font-c t-c">新增群数</div>
					<div class="center num-c">{{ isXinzengValid }}</div>
				</div>
			</div>
			<div class="content-c-c m-r-20">
				<div class="m-r-30 p-relative">
					<img src="../assets/img/img2.png" alt="" />
				</div>
				<div>
					<div class="center font-c t-c">新增客户</div>
					<div class="center num-c">2</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isZongQunInRange: 3925,
			isXinzengValid: 3,
			interactionlist: ''
		};
	},
	mounted() {
		// 存储判断结果到本地
		if (localStorage.getItem('isZongQunInRange') == 3924 && localStorage.getItem('isXinzengValid') == 2) {
			localStorage.setItem('isZongQunInRange', this.isZongQunInRange);
			localStorage.setItem('isXinzengValid', this.isXinzengValid);
			// console.log('测试');
		}
		this.isZongQunInRange = localStorage.getItem('isZongQunInRange') || this.isZongQunInRange;
		this.isXinzengValid = localStorage.getItem('isXinzengValid') || this.isXinzengValid;
		setInterval(() => {
			this.isXinzengValid++;
			this.isZongQunInRange++;
			localStorage.setItem('isZongQunInRange', this.isZongQunInRange);
			localStorage.setItem('isXinzengValid', this.isXinzengValid);
			this.isZongQunInRange = localStorage.getItem('isZongQunInRange');
			this.isXinzengValid = localStorage.getItem('isXinzengValid');
		}, 24 * 60 * 60 * 1000); // 24小时的毫秒数

		this.$nextTick(() => {
			this.interactionlist = this.$store.state.interactionlist;
		});
		setInterval(() => {
			this.$store.dispatch('addinteractionlist');
			this.$nextTick(() => {
				this.interactionlist = this.$store.state.interactionlist;
			});
		}, 60000);
	}
};
</script>

<style scoped>
.disFlex {
	display: flex;
}

.m-b-12 {
	margin-bottom: 20px;
}

.m-r-20 {
	margin-right: 20px;
}

.tit {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	flex-shrink: 0;
}

.disFlexItem {
	display: flex;
	justify-items: center;
	justify-content: space-between;
}

.content-c-c {
	width: 70%;
	height: 80px;
	border: 1px solid #00c7d6;
	background: #030d2d49;
	display: flex;
	justify-content: center;
	align-items: center;
}

.m-r-30 {
	margin-right: 30px;
}

.p-relative {
	position: relative;
	top: 2px;
}

.center {
	text-align: center;
}

.num-c {
	color: #fe7007;
	font-size: 30px;
	font-weight: bold;
}

.font-c {
	color: #0ee4f9;
	font-size: 18px;
}
</style>
